<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>补签申请</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="./teacher/css/head.css">
    <link rel="stylesheet" href="./css/signin_apply_teacher.css">
</head>

<body>
    <div style="height: 40px;"></div>
    <div class="header">
        <div class="header_title">补签申请</div>
        <img src="image/return.png" alt="" class="return" onclick="history.back()">
    </div>
    <div class="apply" id="vue-root">
        <div class="head_content_box">
            <div class="time_box">
                <div class="time_text">课程时间</div>
                <div class="datetime-local_box">
                    <input type="date" class="select_date" placeholder="请选择课程时间" v-model="form.time" @change="fetchClassTime">
                </div>
            </div>
        </div>
        <div class="head_content_item">
            <div class="head_content">
                <div class="head_content_text1">任课班级</div>
                <div class="head_content_text2">
                    <select v-model="form.class" class="clearCss" @change="fetchCourses">
                        <option :value="undefined" disabled="disabled">请选择班级</option>
                        <option v-for="item in classList" :key="item.id" :value="item.id">
                            {{ item.name }}
                        </option>
                    </select>
                </div>
            </div>
            <div class="head_content">
                <div class="head_content_text1">课程名称</div>
                <div class="head_content_text2">
                    <select v-model="form.course" class="clearCss" @change="fetchClassTime">
                        <option :value="undefined" disabled="disabled">请选择课程</option>
                        <option v-for="item in courseList" :key="item.id" :value="item.id">
                            {{ item.name }}
                        </option>
                    </select>
                </div>
            </div>
            <div class="head_content">
                <div class="head_content_text1">课程时间</div>
                <div class="head_content_text2">
                    <select v-model="form.selectedClassTime">
                        <option :value="undefined" disabled="disabled">请选择课程时间段</option>
                        <option v-for="item in classListTime" :key="item.id" :value="item.id">
                            {{ item.startTime }} - {{ item.endTime }}
                        </option>
                    </select>
                </div>
            </div>
        </div>
        <div class="select_student">
            <img src="./image/img/search_icon1.png" alt="">
            <input class="clearCss" v-model="form.selectValue" placeholder="搜索学生" @input="fetchStudents" />
            <ul v-if="filteredStudents.length" class="stus">
                <li v-for="student in filteredStudents" :key="student.id" @click="selectStudent(student)">
                    {{ student.name }}
                </li>
            </ul>
        </div>
        <div class="boqian_box">
            <div class="boqian_text">补签原因</div>
            <textarea class="clearCss" name="studentRemark" data-vv-as="补签原因" placeholder="请填写补签原因" rows="6" v-model="form.remarks"></textarea>
        </div>
        <div class="time_box">
            <div class="time_text">补签时间</div>
            <div class="datetime-local_box">
                <input type="datetime-local" class="select_date" placeholder="请选择课程时间" v-model="form.resignTime">
            </div>
        </div>
        <div class="button" @click="submit">
            提交申请
        </div>
    </div>

    <script src="/scriptZIP/qs.min.js"></script>
    <script src="/scriptZIP/vue.min.js"></script>
    <script src="/scriptZIP/axios.min.js"></script>
    <script src="/scriptZIP/dayjs.min.js"></script>
    <script src="/js/common.js"></script>

    <script>
        var teacher = getTeacher();
        new Vue({
            el: '#vue-root',
            data: {
                form: {
                    time: dayjs().format('YYYY-MM-DD'),
                    class: undefined,
                    course: undefined,
                    selectedClassTime: undefined,
                    selectValue: '',
                    remarks: '',
                    resignTime: dayjs().format('YYYY-MM-DDTHH:mm'),
                },
                classList: [],
                courseList: [],
                classListTime: [],
                allStudents: [],
                filteredStudents: [],
                selectedStudent: null
            },
            created: function () {
                const teacherValue = JSON.parse(sessionStorage.getItem('hxt-teacher') || '{}');
                this.teacherValue = teacherValue;

                const managed = JSON.parse(sessionStorage.getItem('managedClassesAndCourses') || '[]');
                this.classList = managed.map(item => ({
                    id: item.classesId,
                    name: item.classesName
                }));

                this.form.class = this.classList[0]?.id;
                if (this.form.class) {
                    this.fetchCourses(); // 初始化时自动加载课程
                }
            },
            methods: {
                fetchCourses: function () {
                    this.form.course = undefined;
                    this.courseList = [];
                    this.classListTime = [];

                    if (!this.form.class) return;

                    axios.get('/t/course/classesByCourse/' +  this.form.class)
                        .then((res) => {
                            this.courseList = res.data || [];
                            if (this.courseList.length > 0) {
                                this.form.course = this.courseList[0].id;
                                this.fetchClassTime();
                            }
                        })
                        .catch(console.error);
                },
                fetchClassTime: function () {
                    if (!this.form.time || !this.form.class || !this.form.course) return;

                    const params = {
                        date: this.form.time,
                        lid: this.form.class,
                        cid: this.form.course
                    };

                    axios.get('/api/attendanceRecord/getLessTimes', { params })
                        .then((res) => {
                            this.classListTime = res.data;
                            if (this.classListTime.length > 0) {
                                this.form.selectedClassTime = this.classListTime[0].id;
                            }
                        })
                        .catch(console.error);
                },
                fetchStudents: function () {
                    if (!this.form.class || !this.form.course) {
                        alert("请先选择班级和课程");
                        return;
                    }

                    axios.get('/api/attendanceRecord/allNameStudents/'+this.form.class+'/'+this.form.course) 
                       
                        .then((res) => {
                            this.allStudents = res.data;
                            this.filterStudents();
                        })
                        .catch(console.error);
                },
                filterStudents: function () {
                    const keyword = this.form.selectValue.toLowerCase();
                    this.filteredStudents = this.allStudents.filter(student =>
                        student.name.toLowerCase().includes(keyword)
                    );
                },
                selectStudent: function (student) {
                    this.form.selectValue = student.name;
                    this.selectedStudent = student;
                    this.filteredStudents = [];
                },
                submit: function () {
                    if (!this.form.time || !this.form.class || !this.form.course || !this.form.selectedClassTime || !this.form.remarks) {
                        alert('请填写完整的申请信息');
                        return;
                    }
                    const submitData = {
                        applyTime: this.form.resignTime,
                        lessonTimeId: this.form.selectedClassTime,
                        reason: this.form.remarks,
                        studentId: this.selectedStudent?.id,
                        teacherId: teacher.id
                    };

                    axios.post('/api/attendanceRecord/punchOne', submitData)
                        .then((res) => {
                            if (res.data.code == 0) {
                                alert('提交成功');
                                history.back();
                            } else {
                                alert(res.data.msg);
                            }
                        })
                        .catch((err) => {
                            console.error(err);
                            alert('提交失败');
                        });
                }
            }
        });
    </script>

</body>

</html>
